<template>
    <div>
        <div id="getWordCloud" style="height: 200px; width: 100%"></div>
    </div>
</template>

 <script>
import "echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";
// require("echarts-wordcloud");
// require("../node_modules/echarts-wordcloud/dist/echarts-wordcloud.js");
// require("../node_modules/echarts-wordcloud/dist/echarts-wordcloud.min.js");
export default {
    methods: {
        getWordCloud() {
            var myChart = this.$echarts.init(
                document.getElementById("getWordCloud")
            );
            var option = {
                tooltip: {
                    show: true,
                },
                series: [
                    {
                        type: "wordCloud", //类型为字符云
                        shape: "smooth", //平滑 circle
                        gridSize: 8, //网格尺寸
                        rotationRange: 90, //旋转范围
                        textStyle: {
                            normal: {
                                fontFamily: "", // 字体
                                color: function() {
                                    return (
                                        "rgb(" +
                                        Math.round(Math.random() * 255) +
                                        ", " +
                                        Math.round(Math.random() * 255) +
                                        ", " +
                                        Math.round(Math.random() * 255) +
                                        ")"
                                    );
                                },
                            },
                            emphasis: {
                                shadowBlur: 5, //阴影距离
                                shadowColor: "#333", //阴影颜色
                            },
                        },
                        left: "center",
                        top: "center",
                        right: null,
                        bottom: null,
                        width: "100%",
                        height: "100%",
                        data: [
                            { value: 100, name: "文字" },
                            { value: 400, name: "图片" },
                            { value: 333, name: "参考" },
                            { value: 855, name: "音视频" },
                            { value: 343, name: "新媒体" },
                            { value: 343, name: "测试1" },
                            { value: 43, name: "测试2" },
                            { value: 543, name: "测试3" },
                            { value: 333, name: "测试4" },
                            { value: 323, name: "测试5" },
                            { value: 33, name: "测试6" },
                            { value: 13, name: "测试7" },
                            { value: 543, name: "测试8" },
                            { value: 66, name: "测试9" },
                            { value: 666, name: "测试10" },
                        ], // 数据
                    },
                ],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.onresize = function() {
                myChart.resize();
            };
        },
    },
};
</script>
  

